import { View } from '@tarojs/components'
import s from './index.module.scss'
import { useEffect, useRef, useState } from 'react'

import Index01 from './pages/index_1'
import Demo01 from './pages/Demo_1'
import Filter from './pages/filter_1'
import Role from './pages/role'

import Background_1 from './pages/background_1'
import More from './pages/more'
import Color from '../animation/background/01_color'
import Position from '../animation/background/02_position'
import Size from '../animation/background/03_size'
import All from '../animation/background/04_all'
import Filter01 from '../animation/background/05_filter'


const config = {
  'pages/index01/index': {
    struct: Index01,
    title: '首页',
    bg_color: 'orange',
    parameter: {}
  },
  'pages/filter_1/index': {
    struct: Filter,
    title: '滤镜',
    bg_color: 'lightblue',
    parameter: {}
  },
  'pages/demo_1/index': {
    struct: Demo01,
    title: 'background',
    bg_color: 'coral',
    parameter: {}
  },
  'pages/role/index': {
    struct: Role,
    title: '人物卡片',
    bg_color: 'lightskyblue',
    parameter: {}
  },
  'pages/backgroun_1/index': {
    struct: Background_1,
    title: '假设人物卡片列表',
    bg_color: '#ccc',
    parameter: {}
  },
  'pages/more/index': {
    struct: More,
    title: '更多',
    bg_color: '#ccc',
    parameter: {}
  },
  'pages/color/index': {
    struct: Color,
    title: '背景颜色',
    bg_color: '#FFF',
    parameter: {}
  },
  'pages/position/index': {
    struct: Position,
    title: '背景位置',
    bg_color: '#FFF',
    parameter: {}
  },
  'pages/size/index': {
    struct: Size,
    title: '背景大小',
    bg_color: '#FFF',
    parameter: {}
  },
  'pages/all/index': {
    struct: All,
    title: '背景属性',
    bg_color: '#fff',
    parameter: {}
  },
  'pages/filter/index': {
    struct: Filter01,
    title: '背景滤镜(灰值)',
    bg_color: '#fff',
    url: 'pages/filter/index?a=10&b=20',
    parameter: {}
  }
}

export default function Index() {  
  const [stack, setStack] = useState<any[]>([])
  const [exiting, setExiting] = useState(false)
  const [entering, setEntering] = useState(false)
  const [left, setLeft] = useState(100)
  //动画是否执行完毕
  var ani = useRef(false)

  function return_btn() {
    if (ani.current) return
    setExiting(true)
    ani.current = true
  }

  function __end() {
    if (!ani.current) return
    if (exiting) {
      stack.pop()
      setStack([...stack])
      setExiting(false)
    }
    if (entering) {
      setEntering(false)
      setLeft(0)
    }
    ani.current = false
  }

  function navigateTo(path, parameter?: any) {
    if (ani.current) return
    config[path].parameter = parameter
    stack.push(config[path])
    setStack([...stack])
    setEntering(true)
    ani.current = true
  }
  useEffect(() => {
    navigateTo('pages/index01/index')
  },[])
  return (
    <View id={s.wrapper}>
      {stack.map((item, index) => {
        const { struct, ...other} = item
        let __cls = `${s.page}`
        if (stack.length - 1 === index && entering) {
          // 倒数第一页在入场时，进入
          __cls = `${s.page} ${s.top_fade_in}`
        }
        if (stack.length - 1 === index && exiting) {
          // 倒数第一页在退场时，退出
          __cls = `${s.page}  ${s.top_fade_out}`
        }

        if (stack.length - 2 === index && exiting) {
          // 倒数第二页在退出时，进入
            __cls = `${s.page} ${s.ls_fade_in}`
        }
        if (stack.length - 2 === index && entering) {
          // 倒数第二页在入场时，退出
          __cls = `${s.page} ${s.ls_fade_out}`
        }
        
        return (
          <View className={__cls} style={{ backgroundColor: item.bg_color, left: `${left}%`}} onAnimationEnd={__end}>
            <item.struct config={{...other}} key={`stack${index}`} navigateTo={navigateTo} back={return_btn} />
          </View>
        )
      })}
    </View>
  )
}